<!DOCTYPE html>
<!--suppress SpellCheckingInspection, HtmlFormInputWithoutLabel -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>药品</title>
    <link rel="stylesheet" href="../static/css/mdui.min.css" th:href="@{/css/mdui.min.css}">
    <link rel="stylesheet" href="../static/css/bootstrap-fileinput.css" th:href="@{/css/bootstrap-fileinput.css}">
    <link rel="stylesheet" href="../static/css/flatpickr.min.css" th:href="@{/css/flatpickr.min.css}">
</head>
<body class="mdui-appbar-with-toolbar mdui-drawer-body-left mdui-theme-primary-teal mdui-theme-accent-pink">
<div th:replace="_widgets::header"></div>
<div th:replace="_widgets::drawer"></div>
<div class="mdui-container mdui-p-t-2 mdui-p-b-2">
    <form method="post" action="/drug" enctype="multipart/form-data" th:object="${drug}">
        <input type="hidden" name="id" th:value="*{id}">
        <input type="hidden" name="_method" value="PUT" th:if="*{id!=null}">

        <!-- 药品名称、编号、缩写 -->
        <div class="mdui-row">
            <div class="mdui-col-md-6 mdui-textfield">
                <label class="mdui-textfield-label">药品名称</label>
                <input id="inputName" name="name" class="mdui-textfield-input" type="text" maxlength="32" required
                       th:value="*{name}"/>
                <div class="mdui-textfield-error">请输入药品名称</div>
            </div>
            <input id="inputAbbreviate" type="hidden" name="abbreviate" th:value="*{abbreviate}">
            <div class="mdui-col-md-6 mdui-textfield">
                <label class="mdui-textfield-label">药品编号</label>
                <input name="num" class="mdui-textfield-input" type="text" th:value="*{num}"/>
            </div>
        </div>
        <!-- 药品价格、采购员 -->
        <div class="mdui-row">
            <div class="mdui-col-md-6 mdui-textfield">
                <label class="mdui-textfield-label">价格</label>
                <input name="cost" class="mdui-textfield-input" type="text" th:value="*{cost}" required/>
                <div class="mdui-textfield-error">请输入药品价格</div>
            </div>
            <div class="mdui-col-md-6 mdui-textfield">
                <label class="mdui-textfield-label">采购员</label>
                <input name="who" class="mdui-textfield-input" required th:value="*{who}"/>
                <div class="mdui-textfield-error">请输入采购人员</div>
            </div>
        </div>
        <!-- 药品单位、药库、产地 -->
        <div class="mdui-row">
            <div class="mdui-col-md-4 mdui-textfield">
                <label class="mdui-textfield-label">药品单位</label>
                <select name="drugUnit" class="mdui-select">
                    <option value="">请选择药品单位</option>
                    <option th:each="drugUnit:${drugUnits}" th:value="${drugUnit.name}" th:text="${drugUnit.name}"
                            value="" th:selected="${drugUnit.name eq drug.drugUnit}">
                        单位
                    </option>
                </select>
                <div class="mdui-typo-caption mdui-m-t-1" style="color: #F44336" th:if="${#lists.isEmpty(drugUnits)}">
                    建议先添加药品单位
                </div>
            </div>
            <div class="mdui-col-md-4 mdui-textfield">
                <label class="mdui-textfield-label">药库</label>
                <select name="drugDepot" class="mdui-select">
                    <option value="">请选择药库</option>
                    <option th:each="drugDepot:${drugDepots}" th:value="${drugDepot.name}" th:text="${drugDepot.name}"
                            th:selected="${drugDepot.name eq drug.drugDepot}">职务
                    </option>
                </select>
                <div class="mdui-typo-caption mdui-m-t-1" style="color: #F44336" th:if="${#lists.isEmpty(drugDepots)}">
                    建议先添加药库
                </div>
            </div>
            <div class="mdui-col-md-4 mdui-textfield">
                <label class="mdui-textfield-label">产地</label>
                <select name="drugPlace" class="mdui-select">
                    <option value="">请选择药品产地</option>
                    <option th:each="drugPlace:${drugPlaces}" th:value="${drugPlace.name}" th:text="${drugPlace.name}"
                            value="" th:selected="${drugPlace.name eq drug.drugPlace}">
                        产地
                    </option>
                </select>
                <div class="mdui-typo-caption mdui-m-t-1" style="color: #EC407A" th:if="${#lists.isEmpty(drugPlaces)}">
                    建议先添加药品产地
                </div>
            </div>
        </div>

        <!-- 供应商、药品类型 -->
        <div class="mdui-row">
            <div class="mdui-col-md-4 mdui-textfield">
                <label class="mdui-textfield-label">药品供应位</label>
                <select name="drugSupplier" class="mdui-select">
                    <option value="">请选择药品供应位</option>
                    <option th:each="drugSupplier:${drugSuppliers}" th:value="${drugSupplier.name}"
                            th:text="${drugSupplier.name}"
                            value="" th:selected="${drugSupplier.name eq drug.drugSupplier}">
                        供应位
                    </option>
                </select>
                <div class="mdui-typo-caption mdui-m-t-1" style="color: #F44336"
                     th:if="${#lists.isEmpty(drugSuppliers)}">
                    建议先添加供应位
                </div>
            </div>
            <div class="mdui-col-md-4 mdui-textfield">
                <label class="mdui-textfield-label">药品类型</label>
                <select name="drugType" class="mdui-select" required>
                    <option value="">请选择药品类型</option>
                    <option th:each="drugType:${drugTypes}" th:value="${drugType.type}" th:text="${drugType.type}"
                            th:selected="${drugType.type eq drug.drugType}">类型
                    </option>
                </select>
                <div class="mdui-typo-caption mdui-m-t-1" style="color: #F44336" th:if="${#lists.isEmpty(drugTypes)}">
                    请先添加药品类型
                </div>
            </div>
        </div>

        <!-- 描述 -->
        <div class="mdui-row">
            <div class="mdui-col-md-12 mdui-textfield">
                <label class="mdui-textfield-label">描述</label>
                <textarea class="mdui-textfield-input" name="description" th:text="*{description}"></textarea>
            </div>
        </div>

        <!-- 生产日期、入库日期 -->
        <div class="mdui-row">
            <div class="mdui-col-md-6 mdui-textfield">
                <label class="mdui-textfield-label">生产日期</label>
                <input id="inputProduceDate" name="produceDate" class="mdui-textfield-input" type="date"
                       th:value="*{#dates.format(produceDate,'yyyy-MM-dd')}" required/>
            </div>
            <div class="mdui-col-md-6 mdui-textfield">
                <label class="mdui-textfield-label">入库日期</label>
                <input id="inputStorageTime" name="storageTime" class="mdui-textfield-input" type="date"
                       th:value="*{#dates.format(storageTime,'yyyy-MM-dd')}" required/>
            </div>
        </div>

        <!-- 药品图片 -->
        <div class="mdui-row">
            <div class="mdui-col-md-6 mdui-textfield">
                <label class="mdui-textfield-label">药品图片</label>
                <div class="fileinput fileinput-new" data-provides="fileinput">
                    <div class="mdui-m-b-1">
                        <span class="mdui-btn mdui-btn-dense btn-file mdui-color-blue-accent mdui-ripple">
                            <span class="mdui-btn mdui-btn-dense mdui-color-blue-accent mdui-ripple fileinput-new">选择文件</span>
                            <span class="mdui-btn mdui-btn-dense mdui-color-blue-accent mdui-ripple fileinput-exists">换一张</span>
                            <input type="file" name="photoFile" id="picID" accept="image/gif,image/jpeg,image/x-png">
                            <input type="hidden" name="photo" th:value="*{photo}">
                        </span>
                        <a href="javascript:void(0)" data-dismiss="fileinput"
                           class="mdui-btn mdui-btn-dense mdui-color-amber-accent fileinput-exists mdui-ripple">
                            移除
                        </a>
                    </div>
                    <div class="fileinput-new thumbnail" style="width: 200px;height: auto;max-height:150px;">
                        <img id="picImg" style="width: auto;height: auto;max-height: 140px;"
                             src="../static/image/noimage.png"
                             th:src="${#strings.isEmpty(drug.photo)?'/image/noimage.png':'/drug/'+drug.photo}" alt="">
                    </div>
                    <div class="fileinput-preview fileinput-exists thumbnail"
                         style="max-width: 200px; max-height: 150px;">
                    </div>
                </div>
            </div>
        </div>

        <div class="mdui-row">
            <button class="mdui-btn mdui-color-theme-accent mdui-ripple mdui-btn-raised mdui-center" type="submit">
                <i class="mdui-icon mdui-icon-left material-icons">&#xe161;</i>
                保存
            </button>
        </div>
    </form>
</div>
<script src="../static/js/mdui.min.js" th:src="@{/js/mdui.min.js}"></script>
<script src="../static/js/pinyin_dict_firstletter.js" th:src="@{/js/pinyin_dict_firstletter.js}"></script>
<script src="../static/js/pinyinUtil.js" th:src="@{/js/pinyinUtil.js}"></script>
<script src="../static/js/jquery-2.1.1.js" th:src="@{/js/jquery-2.1.1.js}"></script>
<script src="../static/js/bootstrap-fileinput.js" th:src="@{/js/bootstrap-fileinput.js}"></script>
<script src="../static/js/flatpickr.min.js" th:src="@{/js/flatpickr.min.js}"></script>
</body>
<script>
    var $$ = mdui.JQ;
    var listItem = $$('#drugs');
    listItem.addClass('mdui-list-item-active');
    listItem.parent().parent().addClass('mdui-collapse-item-open');

    $$('#inputName').on('blur', function () {
        $$('#inputAbbreviate').val(pinyinUtil.getFirstLetter($$(this).val(), false));
    });

    // $("#inputProduceDate").flatpickr();
    // $("#inputStorageTime").flatpickr({enableTime: true});
</script>
</html>